<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>So, you want to start your meeting?</title>
    <link rel="stylesheet" type="text/css" href="styles/startMeeting.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="styles/jquery-ui-1.8.1.custom.css" media="screen" />
    <script type="text/javascript" src="scripts/jquery-1.4.2.min.js" ></script>
    <script type="text/javascript" src="scripts/jquery-ui-1.8.1.custom.min.js"></script>
    <script type="text/javascript" src="scripts/jquery.layout.min-1.2.0.js"></script>
    <script type="text/javascript" src="scripts/shortcuts.js"></script>
    <script type="text/javascript" src="scripts/jquery.qtip-1.0.0-rc3.min.js"></script>
    <script type="text/javascript" src="scripts/wikid-0.2.js" ></script>
    <script type="text/javascript" src="scripts/date.js" ></script>
    <script type="text/javascript" src="scripts/couch.js"></script>
	<script type="text/javascript" src="scripts/jquery.couch.js"></script>
    <script type="text/javascript">


        $(function() {
            $('#agenda').hide();
            $('#previous').hide();


            $("input[value='no']").click(function() {
                $('#previous').hide();
                $('#agenda').hide();
            });

            $("input[value='previous']").click(function() {
                $('#agenda').hide();
                $('#previous').show('slide', {}, 500);

            });

            $("input[value='agenda']").click(function() {
                $('#previous').hide();
                $('#agenda').show('slide', {}, 500);

            });

            $("#meetingName").change(function() {
                var topicName = getMeetingTopicId();
               $('.topicName').text(topicName);
            });

            $('button').button().click(function() {

                var topicId = getMeetingTopicId();
                $('.topicName').text(topicId);
                var now = new Date().getTime();

                var meeting = {
                    "_id": topicId,
                    "-tags":["Meeting"],
                    "-type" : "Conversation",
                    "-Recording" : {
                        "-startTime" : now
                    }
                };
                var db_name = wikid.parseDBname(window.location);
                var db = new CouchDB(db_name);
                var existingMeeting = db.open(topicId);
                if (existingMeeting) {
                    $('.topicName').addClass('ui-state-error');
                }
                else {
                    db.save(meeting);
                    window.location = "outliner.html?" + topicId;
                }

            });

        });

        function getMeetingTopicId() {
            var day = Date.today().toString('d-MMM-yyyy');
            var title = $.trim($('#meetingName').val()) + " (" + day + ")";
            return wikid.topicIdFromTitle(title);
        }

    </script>
</head>
<body>
    <h2>So you wanna meet?</h2>



    <div class="fieldHeader">Do you have an agenda?</div>
    <div>
        <input type="radio" name="agenda" value="no" checked="checked"/> No, start from a blank slate.
    </div>
    <div>
        <input type="radio" name="agenda" value="previous" /> No, but create one now based on a previous meeting.
    </div>
    <div id="previous" class="indent">
        Meeting <input type="text" name="previousMeeting" /> 
    </div>
    <div>
        <input type="radio" name="agenda" value="agenda"/> Yes
    </div>
    <div id="agenda" class="indent">
        Agenda
        <select name="agenda" >
            <option value="Agenda_1">Agenda 1</option>
            <option value="Agenda_2">Agenda 2</option>
            <option value="Agenda_3">Agenda 3</option>
            <option value="Agenda_4">Agenda 4</option>
            <option value="Agenda_5">Agenda 5</option>
            <option value="Agenda_6">Agenda 6</option>
            <option value="Agenda_7">Agenda 7</option>
        </select>
    </div>
    <div>
        <div class="fieldHeader">Meeting Name</div>
        <input id="meetingName" type="text" name="meetingName" id="meetingName"/>
        <div class="topicName"></div>
    </div>
    <button id="startButton">Start</button>

</body>
</html>